<template>
    <div id="app">
        <div class="head">head</div>
        <div class="body">
            body {{test}} {{project}} {{item}}
            <div @click="testAjax">ajax test</div>
        </div>
        <div class="foot">foot</div>
        <router-view></router-view>
    </div>
</template>
<script>
import * as API from './api'

export default {
    //路由没有走APP.VUE　所以无法解析asyncData,在home.vue就行
    asyncData({ store, route }) {
        return store.dispatch('requestAsyncData');
    },

    computed: {
        // 从 store 的 state 对象中的获取 item。
        item() {
            return this.$store.state.items;
        }
    },


    name: 'app',

    data() {
        return {
            test: 'test',
            project: 'abc'
        }
    },

    methods: {
        testAjax() {
            let tthis = this;
            API.test({
                success: function(response) {
                    tthis.project = 'ajax project';
                }
            });
        }
    }
}
</script>